<template>
  <div class="card">
      <div class="message-box">
        <div class="message-box-title sa-flex sa-row-between sa-col-center">
          <div class="message-box-title-left sa-flex sa-col-center">
            <img src="" alt="">
            <div>消息通知</div>
          </div>
          <div class="message-box-title-right sa-flex sa-col-center">
            <div>更多</div>
            <el-icon><ArrowRight /></el-icon>
          </div>
        </div>
      </div>
  </div>
</template>

<script setup>
  import { reactive } from 'vue';
  import { ArrowRight } from '@element-plus/icons-vue';
</script>

<style lang="scss" scoped>
  .card {
    padding: 0 var(--sa-padding);
    font-weight: 400;
    &:hover {
      transition: all 0.2s;
      @media screen and (min-width: 1200px) {
        transform: scale(1.05);
      }
      @media screen and (max-width: 1200px) {
        transform: scale(1.02);
      }
    }

    .message-box {
      height: 150px;
      padding: 10px 0;

      .message-box-title-left {
        img {
          width: 24px;
          height: 24px;
        }

        div {
          margin-left: 10px;
          font-family: 'Source Han Sans CN';
          font-size: 12px;
          font-weight: normal;
          color: #8C8C8C;
        }
      }

      .message-box-title-right {
        div {

          font-family: 'Source Han Sans CN';
          font-size: 14px;
          font-weight: normal;
          color: #8C8C8C;
        }
      }
    }
  }
</style>
